@use "../variables" as *;

.svc-image-question-controls {
  position: absolute;
  top: calcSize(5);
  right: calcSize(1);
  display: none;
}

.svc-question__content--selected .svc-image-question-controls {
  display: flex;
}

.svc-question__content--image:not(.svc-question__content--loading):not(.svc-question__content--empty) {
  padding-left: 0;
  padding-right: 0;

  .sd-image__image {
    border-radius: 0;
  }
  .svc-question__content-actions {
    padding-left: calcSize(5);
    width: calc(100% - 2.5 * #{$base-unit});
    box-sizing: border-box;
    & > .sv-action-bar {
      width: calc(100% - #{calcSize(5)});
      left: calcSize(5);
    }
  }
}

.svc-question__content--image.svc-question__content--empty .sd-file,
.svc-question__content--image.svc-question__content--empty sv-ng-file-question {
  width: 100%;
}

.svc-question__content--image.svc-question__content--empty .sd-question--image {
  display: none;
}

.svc-question__content--image .sd-file__choose-btn--text {
  .sv-svg-icon {
    display: none;
  }
}

@container (max-width: #{$sd-panel-medium-min-width}) {
  .svc-question__content--image .sd-file__choose-btn--text {
    .sv-svg-icon {
      display: block;
    }
  }
}
.svc-question__content--loading {
  .sd-image {
    display: none;
  }
}

.svc-image-question__loading-placeholder {
  position: relative;
  width: 100%;
  height: calcSize(27.5);
  border: var(--ctr-survey-placeholder-border-width, var(--lbr-stroke-x1)) dashed var(--ctr-survey-placeholder-border-color, var(--sjs-border-25, #D4D4D4));
  box-sizing: content-box;
}

.svc-image-question__loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}